<template>
  <div>
    <div class="login-box">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <div class="login-header">
            <span class="fs16">竹子买车可视化数字运营中心</span>
          </div>
        </div>
        <div class="text item">
          <el-form
            :model="loginForm"
            status-icon
            :rules="rules"
            ref="loginForm"
            label-width="80px"
            class="demo-ruleForm"
          >
            <el-form-item label="账号：" prop="account" class="mt20">
              <el-input v-model="loginForm.account" placeholder="请输入账号..."></el-input>
            </el-form-item>
            <el-form-item label="密码：" prop="password" class="mt20">
              <el-input
                type="password"
                v-model="loginForm.password"
                autocomplete="off"
                placeholder="请输入密码..."
                @keyup.enter.native="submitForm('loginForm')"
              ></el-input>
            </el-form-item>
            <el-form-item label="验证码：" prop="captcha" class="mt20">
              <el-input
                v-model="loginForm.captcha"
                class="captcha-input"
                maxlength="8"
                placeholder="请输入验证码"
              ></el-input>
              <div ref="captcha" class="divIdentifyingCode" @click="getIdentifyingCode()"></div>
            </el-form-item>
            <el-form-item class="mt20 pt10">
              <el-button type="primary" @click="submitForm('loginForm')">管理员登陆</el-button>
              <el-button @click="resetForm('loginForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
    <carousel></carousel>
  </div>
</template>

<script>
import carousel from "@/components/carousel";

export default {
  name: "login",
  data() {
    // var validateAccount = (rule, value, callback) => {
    //   if (!value) {
    //     return callback(new Error("请输入账号！"));
    //   } else {
    //     callback();
    //   }
    // };
    // var validatePassword = (rule, value, callback) => {
    //   if (!value) {
    //     callback(new Error("请输入密码"));
    //   } else {
    //     callback();
    //   }
    // };
    const validate = (msg, min, max, limit_msg) => {
      return (rule, value, callback) => {
        if (!value) {
          callback(new Error(msg));
        } else if (value.length < min) {
          callback(new Error(limit_msg));
        } else if (value.length > max) {
          callback(new Error(limit_msg));
        } else {
          callback();
        }
      };
    };
    return {
      loginForm: {
        account: "",
        password: "",
        captcha: ""
      },
      rules: {
        account: {
          validator: validate(
            "请输入账号！",
            6,
            20,
            "请输入由数字、26个英文字母或者下划线组成的字符！"
          ),
          trigger: "blur"
        },
        password: {
          validator: validate("请输入密码！", 6, 16, "长度在 6-16 个字符！"),
          trigger: "blur"
        },
        captcha: {
          validator: validate("请输入验证码！", 4, 4, "长度为4个字符！"),
          trigger: "blur"
        }
      }
    };
  },
  mounted() {
    this.getIdentifyingCode();
  },
  methods: {
    getIdentifyingCode() {
      this.$axios.get("/api/users/captcha").then(data => {
        this.$refs.captcha.innerHTML = data;
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$axios.post("/api/users/login", this.loginForm).then(data => {
            switch (data.status) {
              case 404:
                this.$message({
                  type: "error",
                  message: data.msg
                });
                return;
                break;
              case 0:
                this.$message({
                  type: "error",
                  message: "密码错误！"
                });
                return;
                break;
              case 401:
                this.$message({
                  type: "waring",
                  message: "没有权限！"
                });
                return;
                break;
              case 1:
                this.$message({
                  type: "success",
                  message: "登陆成功！"
                });
                sessionStorage.setItem("Token", data.token); // 存储token
                sessionStorage.setItem("loginUser", JSON.stringify(data.user));
                sessionStorage.setItem("tabs", JSON.stringify([]));
                this.$router.push({ name: "home" });
                break;
              default:
            }
          });
        } else {
          this.$message({
            type: "waring",
            message: "登陆失败！",
            showClose: true
          });
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  components: {
    carousel
  }
};
</script>

<style>

</style>
